<script setup>
import { EMAIL } from '@/constants/regexp'


const props = defineProps({
  email: {
    type: String,
    default: '',
  },
})
const formRef = ref(null)
const form = reactive({
  email: '',
  emailCode: '',
})
const formRules = reactive({
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: EMAIL,
      message: '邮箱格式错误',
      trigger: ['blur'],
    },
  ],
  emailCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ],
})

const valid = ref(false)
const isIdle = ref(true)
watch([() => form.email], () => {
  formRef.value.validateField(['email'], (state) => {
    valid.value = state
  })
})

watch(() => props.email, (val) => {
  formRef.value?.resetFields()
  form.email = val
  form.emailCode = ''
})
async function sendCode() {
  // 判断是否是修改组件，若是则先验证邮箱号是否重复
  if (!props.email) {
    // 判断充当是验证还是修改组件
    const { accountEmail } = await useRequest('VerifyRepetition', {
      accountEmail: form.email,
    })
    if (accountEmail) {
      isIdle.value = true
      ElNotification({
        message: '该邮箱已注册',
        type: 'warning',
        duration: 2000,
      })
      return
    }
  }
  const { success } = await useRequest('MailCodeSend', { mail: form.email })
  if (success) {
    ElNotification({
      message: '邮箱验证码发送成功',
      type: 'success',
      duration: 2000,
    })
  }
  else {
    /** 10分钟内勿重复发送 */
    isIdle.value = true
  }
}
// 3.验证邮箱验证码是否正确
function checkCode() {
  return new Promise((resolve) => {
    formRef.value.validateField('emailCode', async (valid) => {
      if (valid) {
        const { email, emailCode: code } = form
        const { valid } = await useRequest('ValidateMailCode', { mail: email, code })
        if (valid) {
          resolve({ email, code })
          // ElNotification({
          //   message: '邮箱验证码填写正确',
          //   type: 'success',
          //   duration: 3000,
          // })
        }
        else {
          ElNotification({
            type: 'error',
            message: '邮箱验证码填写错误',
          })
          // reject(new Error('邮箱验证码填写错误'))
        }
      }
      else {
        // reject(new Error('邮箱验证码填写错误'))
      }
    })
  })
}
onMounted(() => {
  // 是验证身份
  if (props.email)
    form.email = props.email
})

onUnmounted(() => {
  Object.assign(form, {})
})

defineExpose({
  checkCode,
  form,
})
</script>

<template>
  <!-- 邮箱验证 -->
  <el-form
    ref="formRef"
    :model="form"
    :rules="formRules"
    label-width="100px"
  >
    <el-form-item v-if="form.email" label="绑定邮箱" prop="email">
      <el-input v-model="form.email" disabled />
    </el-form-item>
    <el-form-item v-else label="邮箱" prop="email">
      <el-input
        v-model="form.email"
        placeholder="请输入邮箱"
        clearable
      />
    </el-form-item>

    <el-form-item label="邮箱验证码" prop="emailCode">
      <div class="flex-center">
        <el-input
          v-model="form.emailCode"
          class="flex-1"
          placeholder="请输入邮箱验证码"
        />
        <CountDown v-model:valid="valid" v-model:isIdle="isIdle" @click="sendCode" />
      </div>
    </el-form-item>
  </el-form>
</template>
